(function () {
  let mychart = echarts.init(document.querySelector(".box"));
  let item = {
    name: "",
    value: 100,
    itemStyle: {
      color: "#254065",
    },
    emphasis: {
      itemStyle: {
        color: "#254065",
      },
    },
    tooltip: {
      extraCssText: "opacity:0",
    },
  };
  var option = {
    tooltip: {
      trigger: "item",
    },
    grid: {
      left: "0%",
      right: "4%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
      show: true,
      borderColor: "rgba(0,222,222,0.7)",
    },
    xAxis: [
      {
        type: "category",
        data: [
          "上海",
          "广州",
          "西安",
          "南京",
          "郑州",
          "深圳",
          "",
          "......",
          "",
          "杭州",
          "广州",
          "西安1",
          "南京1",
          "广州1",
          "西安1",
        ],
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        axisLabel: {
          color: "#3b7bcc",
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0,222,222,0.7)",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisTick: {
          show: false,
          alignWithLabel: false,
        },
        axisLabel: {
          color: "#3b7bcc",
        },
        axisLine: {
          lineStyle: {
            color: "rgba(0, 79, 94,0.7)",
          },
        },
        splitLine: {
          lineStyle: {
            color: "rgba(0,222,222,0.7)",
          },
        },
      },
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "60%",
        data: [
          10,
          52,
          200,
          334,
          390,
          330,
          item,
          item,
          item,
          200,
          334,
          390,
          330,
          220,
          100,
        ],
      },
    ],
  };
  mychart.setOption(option);
  window.addEventListener("resize", function () {
    mychart.resize();
  });
})();
